<template>
  <div>
    <el-row :gutter="2">
      <el-form ref="purchasingListAddGoodsForm" :model="purchasingListAddGoodsFormData" :rules="rules" size="small"
        label-width="100px">
        <el-col :span="24">
          <el-form-item label="采购清单ID" prop="purchasingListId" v-show="false">
            <el-input v-model="purchasingListAddGoodsFormData.purchasingListId" placeholder="请输入采购清单ID" :maxlength="11"
              readonly :disabled='true' clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="选择商品" prop="goodsId">
            <el-select v-model="purchasingListAddGoodsFormData.goodsId" placeholder="请输入选择商品" filterable clearable
              :style="{width: '100%'}" @change="setGoods">
              <el-option v-for="(item, index) in goodsIdOptions" :key="index" :label="item.goodsName"
                :value="item.goodsId" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品单价">
            <el-input v-model="goods.goodsValue" readonly :disabled="true" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品库存">
            <el-input v-model="goods.goodsNumber" readonly :disabled="true" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="可提取数量">
            <el-input v-model="goods.goodsNumberRemain" readonly :disabled="true" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品数量" prop="goodsNumber">
            <el-input v-model="purchasingListAddGoodsFormData.goodsNumber" placeholder="请输入商品数量" clearable
              :style="{width: '100%'}" @change="getGoodsNumber()"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总金额" prop="goodsTotalCost">
            <el-input v-model="purchasingListAddGoodsFormData.goodsTotalCost" placeholder="根据输入商品数据回车生成" clearable
              :disabled='true' :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm" size="mini">添加</el-button>
            <!-- <el-button @click="resetForm">重置</el-button> -->
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import {purchasingListAddGoods, goodsFromContract} from '@/api/sale'
import {goodsAll, goodsSearch} from '@/api/common'

export default {
  components: {},
  props: ['purchasingList'],
  data() {
    return {
      purchasingListAddGoodsFormData: {
        purchasingListId: '',
        goodsId: undefined,
        goodsNumber: undefined,
        goodsTotalCost: undefined,
      },
      rules: {
        purchasingListId: [{
          required: true,
          message: '请输入采购清单ID',
          trigger: 'blur'
        }],
        goodsId: [{
          required: true,
          message: '请输入选择商品',
          trigger: 'change'
        }],
        goodsNumber: [{
          required: true,
          message: '请输入商品数量',
          trigger: 'blur'
        }],
        goodsTotalCost: [{
          required: true,
          message: '总金额自动生成',
          trigger: 'blur'
        }],
      },
      goodsIdOptions: [],
      //当前选择商品
      goods: {}
    }
  },
  computed: {},
  watch: {
    // 监听采购清单ID变化
    purchasingList: function(n, o){
      this.purchasingListAddGoodsFormData.purchasingListId = n.purchasingListId
      this.goodsIdOptions = []
      this.getGoodsListByContractId()
    }
  },
  created() {
    // 创建组件时，初始化采购清单id
    this.purchasingListAddGoodsFormData.purchasingListId = this.purchasingList.purchasingListId
    // 合同的商品列表
    this.getGoodsListByContractId()
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['purchasingListAddGoodsForm'].validate(valid => {
        if (!valid) return
        this.purchasingListAddGoodsFormData.contractId = this.purchasingList.contractId
        purchasingListAddGoods(this.purchasingListAddGoodsFormData)
        this.resetForm()
        this.goods = {}
      })
    },
    resetForm() {
      this.$refs['purchasingListAddGoodsForm'].resetFields()
    },
    // 监听商品下拉选择框
    setGoods(value){
      for(let i=0;i<this.goodsIdOptions.length;i++){
        if(this.goodsIdOptions[i].goodsId == value){
          this.goods = this.goodsIdOptions[i]
        }
      }
    },
    // 监听商品数量输入框
    getGoodsNumber(){
      // 不允许超出可提取数量
      if(this.purchasingListAddGoodsFormData.goodsNumber > this.goods.goodsNumberRemain){
        this.$message({
          message: "数量超出可提取范围",
          type: 'error',
          duration: 1000
        })
        this.purchasingListAddGoodsFormData.goodsNumber = undefined
        return
      }

      // 计算总金额
      let goodsTotalCost = this.purchasingListAddGoodsFormData.goodsNumber * this.goods.goodsValue
      this.purchasingListAddGoodsFormData.goodsTotalCost = goodsTotalCost
    },
    // 根据合同ID获取商品列表
    getGoodsListByContractId(){
      goodsFromContract({contractId: this.purchasingList.contractId}).then(res => {
        this.goodsIdOptions = res.data.goodsList
        this.purchasingListAddGoodsFormData.goodsId = res.data.goodsList[0].goodsId
        this.goods = res.data.goodsList[0]
      }).catch(err => {
        this.goodsIdOptions = []
        this.purchasingListAddGoodsFormData.goodsId = undefined
        this.goods = {}
      })
    }
  }
}

</script>
<style>
</style>